<template>

    <ResourceSearch v-model="search" @search-click="queryResourceList"/>

    <CustomTable :columns="columns" :data="data" :current="pagination.page" :rows="pagination.rows"
                 :total="pagination.total" @page-click="queryResourceList">
        <!-- 处理关键字 -->
        <template #keywords="{ row, index }">
            <template v-if="row.keywords">
                <Tag color="default" v-for="(key, index) in row.keywords.split('::')" :key="key">{{ key }}</Tag>
            </template>
        </template>
        <!-- 处理资源大小 -->
        <template #size="{ row, index }">{{ getSizeDisplay(row.size) }}</template>

        <!-- 处理资源状态  1 代表 审核通过， 0 未审核， -1 审核失败 -->
        <template #status="{ row, index }">
            <DotTag type="default" v-if="row.del">已下架</DotTag>
            <DotTag type="success" v-else-if="row.state == 1">已通过</DotTag>
            <DotTag type="primary" v-else-if="row.state == 0">未审核</DotTag>
            <DotTag type="error" v-else>未通过</DotTag>
        </template>

        <!-- 处理动作 -->
        <template #action="{ row, index }">
            <Button type="primary" v-if="row.state === 0 || row.state ===-1" icon="ios-create-outline" size="small" style="margin-right: 5px" @click="verifyResource(row)">审核资源</Button>
            <Button type="info" v-if="row.state === 1 && !row.core" icon="ios-bonfire" size="small" style="margin-right: 5px" @click="configCoreResource(row)">设置精选</Button>
            <Button type="default" v-if="row.state === 1 && row.core" icon="ios-bonfire" size="small" style="margin-right: 5px" @click="configCoreResource(row)">取消精选</Button>
            <Button type="error" icon="ios-remove-circle-outline" size="small" @click="remove(row, index)">下架</Button>
        </template>

        <template #core="{ row, index }">
          <DotTag type="primary" v-if="row.core">是</DotTag>
          <DotTag v-else type="warn">否</DotTag>
        </template>

        <template #author="{row, index}">
           {{ row.nickName ?? row.tel }}
        </template>

    </CustomTable>

    <!-- on-verify 用来保存数据、并传入一个参数，代表表单提交的数据  -->
    <VerifyWin v-model="drawer.state" v-if="drawer.state" :row="drawer.row" @on-verify="verifyData">
        <template #default="{row}">
            <ResourceDetail :row="row" />
        </template>
    </VerifyWin>

</template>

<script setup>
import { ref, reactive, onMounted} from 'vue'
import CustomTable from '../components/CustomTable.vue';
import DotTag from '../components/DotTag.vue'; 
import ResourceDetail from '../components/resource/ResourceDetail.vue';
import ResourceSearch from '../components/resource/ResourceSearch.vue' ;
import VerifyWin from '../components/VerifyWin.vue' ;
import Tips from '../message'
import RSS from "../api/rssIndex.js"

// 获取 从路由中传入的绑定参数 
const props = defineProps(["state", "action"]) ; 

const drawer = ref({
    state: false,  
    row: {} , // 要审核的资源
})

const columns = reactive([
    {title: "资源名",key: "resourceName",width: 240},
    {title: "资源大小",slot: "size",width: 100},
    {title: "关键字",slot: "keywords"},
    {title: "分类",key: "typeName"},
    {title: "上传者",slot: "author",width: 140},
    {title: "上传时间",key: "createTime",width: 170, align: "center"},
    {title: "状态", slot: "status",width: 120, align: "center"},
    {title: "精选", slot: "core",width: 80, align: "center"},
    {title: "操作",slot: "action",width: 200, align: "center"},
]);

// 定义分页对象
const pagination = reactive({ page: 1, rows: 12, total: 0 });

// 定义查询参数
const search = ref({
  state: props.state ,
  resourceName: null,
  start: null,
  end: null,
  keywords: null,
}) ;

// 要修改 data, 可以通过 data.value = ...
const data = ref([]);

// 当 审核不通过的时候，新增一列 (审核失败原因)， 如果在 router-view 中配置了 key, 可以使用 onMounted 替代 watch, 使用 watch 需要添加 immediate
onMounted(()=> {
    // if (props.state == -1 && props.action === "notApproved") {
    //     let len = columns.length ;
    //     columns.splice(len - 1, 0,  {title: "审核失败原因", key: "reason", width: 180})
    // }else{
    //     // 找到 key = reason 的列，并删除
    //     let index = columns.findIndex(col => col.key === "reason") ;
    //     if (index !=-1 ) columns.splice(index, 1) ;
    // }
    // 根据状态 分页查询对应的资源数据
    queryResourceList();
})

/**
 * 查询资源列表信息
 */
function queryResourceList(page) {
    if (page != null) pagination.page = page ;
    return RSS.queryResources({
      ...pagination ,
      ...search.value,
    }).then(ret => {
       if (ret.status) {
         data.value = ret.data.records ;
         pagination.total = ret.data.total ;
       }
    })
}

// 处理资源大小
function getSizeDisplay(size) {
    if (size == null) return 0 ;
    if (size > 1 << 30) return (size / (1 << 30)).toFixed(1) + "GB";
    if (size > 1 << 20) return (size / (1 << 20)).toFixed(1) + "MB";
    if (size > 1 << 10) return (size / (1 << 10)).toFixed(1) + "kB";
    return size + "B";
}

// 打开审核窗口
function verifyResource(row) {
    drawer.value.state = true ;
    drawer.value.row = {...row} ;
}

// 设置精华消息
function configCoreResource(row) {
  Tips.confirm(row.core ? "您确定要取消该精选资源吗?" : "您确定要将该资源设置为精选资源吗?").then(()=> {
    RSS.confCoreResource(row.id).then(ret=> {
      if(ret.status) {
        row.core = !row.core;
        Tips.success("操作完成");
      }
    });
  });
}

// 资源下架
function remove(row, index) {
    Tips.confirm("您确定要下架该资源吗?").then(()=> {
       RSS.removeResource(row.id).then(ret=> {
          if(ret.status) {
            Tips.success("操作完成");
            queryResourceList();
          }
       });
    });
}

function verifyData(data) {
    Tips.success("操作完成");
    drawer.value.state = false;
    queryResourceList();
}
</script>
